<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="head&kk.css">
	<style>
	haha
		.content{
			background-image: url(img/21.png);
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;    
		    height:491px;  
		    z-index: 1;
		}

		ul{
			
			list-style: none;
			text-align: center;
			margin-top: 0px;
			padding-top: 30px;
			position: absolute;
			z-index: 1;
		}
		.li_1{
			font-weight: bold; background-color: initial; color: rgb(216, 167, 111);
			font-size: 24px;
			margin: 0 auto;
			margin-bottom: 50px;
		}
		input{
			width: 248px;
			height: 38px;
			color: rgb(103, 103, 103);
			opacity: 0.8;
			margin-left: -10px;
			padding-left: 10px;
		}
		ul li{
			margin-top: 20px;
		}
		.i{ background-color :pink;
			color: white;	
			opacity: 0.8;
		}

	</style>
</head>
<body>
		<div class="page">
		<!-- 头部 -->
		<svg xmlns="http://www.w3.org/2000/svg" width="322" height="48" viewBox="0 0 322 48"><path fill="#F6F9FA" d="M0 48v-4.052C0 23.389 16.911 8.571 37.225 6.723c0 0 61.917-3.723 123.819-3.723 61.872 0 123.73 3.723 123.73 3.723C305.329 8.571 322 23.389 322 43.948V48"/></svg>
		<div class="header">
			<h1 class="head_name">邀请函</h1>
		</div>
		<!-- 内容 -->
		<div class="content">
			<!-- 音频图标 -->
			<div class="icon">
				<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
			</div>
			<div class="auds">
			<!-- 音频文件 -->
				<audio src="i/1.mp3" controls="controls" autoplay="autoplay" id="audio" >
				</audio>
			</div>
			<!-- 背景图 -->
			<div id="family">
				<ul>
					<li class="li_1">
						<span>征集报名</span>
					</li>
					<li>
						<input type="text" placeholder="姓名">
					</li>
					<li>
						<input type="text" placeholder="手机">
					</li>
					<li>
						<input type="text" placeholder="公司/职业">
					</li>
					<li class="btn">
						<input type="button" value="提交" style="background-color: rgb(216, 167, 111);color: rgb(255, 255, 255);opacity: 1;border-color: rgb(204, 204, 204);border: 0px;">
					</li>
					<li>
						<hr style="width: 95%">
					</li>
				</ul>
				<img src="img/71.png" alt="" style="position: absolute;padding-top: 310px;padding-left: 60px;display: none;" class="imgs">
			</div>
		</div>
		<svg xmlns="http://www.w3.org/2000/svg" width="322" height="45" viewBox="0 0 322 45"><path fill="#F6F9FA" d="M322 0v4.052c0 20.559-16.671 35.377-37.225 37.225 0 0-61.857 3.723-123.73 3.723-61.902 0-123.819-3.723-123.819-3.723C16.911 39.429 0 24.611 0 4.052V0"/></svg>
	</div>

	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function() {
            $("body input").focus(function() {
                $(this).addClass("i");
            }).blur(function() {
                $(this).removeClass("i");
            })
            $(".imgs").fadeIn(1000)
        })
	</script>
</body>
</html>